<template>
	<div id="more">
		<div id="title">
			<span>更多设置</span>
		</div>
		<ul id="more_ul">
			<li>
				<div class="more_logo">
					<el-icon :size="30" color="rgb(84,146,255)"><Search /></el-icon>
				</div>
				<div class="div_style">
					<span>开门记录</span>
				</div>
			</li>
			<li>
				<div class="more_logo">
					<el-icon :size="30" color="rgb(84,146,255)"><Camera /></el-icon>
				</div>
				<div class="div_style">
					<span>门口视频</span>
				</div>
			</li>
			<li>
				<div class="more_logo">
					<el-icon :size="30" color="rgb(84,146,255)"><Tools /></el-icon>
				</div>
				<div class="div_style">
					<span>门禁钥匙</span>
				</div>
			</li>
		</ul>
	</div>
</template>

<script>
	import { Search } from "@element-plus/icons";
	import { Camera } from "@element-plus/icons";
	import { Tools } from "@element-plus/icons";
	export default {
		name: "MoreOpenDoor",
		components: {
			Search,
			Camera,
			Tools
		}
	}
</script>

<style lang="less" scoped>
	#more {
		width: 100%;
		height: 130px;
		clear: both;
		display: block;
		margin-top: 50px;
	}
	#more span {
		font-size: 12px;
	}
	#more_ul li {
		list-style: none;
		float: left;
		margin-top: 20px;
		margin-left: 49px;
		font-size: 13px;
	}
	#title {
		width: 100%;
		margin-top: 15px;
		float: left;
		display: block;
	}
	#title span {
		float: left;
		margin-left: 17px;
		margin-top: 10px;
		font-size: 15px;
		color: rgb(61, 70, 132);
	}
	.more_logo {
		width: 25px;
		height: 25px;
		float: left;
		margin-left: 19px;
		margin-top: 1px;
		display: block;
	}
	.div_style {
		margin-top: 33px;
		margin-left: 8px;
	}
	
</style>